<template>
    <a-layout id="components-layout-demo-fixed">
        <a-layout-header :style="{ position: 'fixed', zIndex: 1, width: '100%' }">
            <div :class="['logo_white']" >资源中心</div>
        </a-layout-header>
        <a-layout-content :style="{ padding: '0 50px', marginTop: '64px' ,minWidth:'1000px'}">
            <div :style="{ background: '#fff', padding: '24px', minHeight: '600px',marginTop: '20px', }">
                <a-tabs defaultActiveKey="1" >
                    <a-tab-pane tab="开发文档" key="1">
                        <div style="float: left;height: 100%">
                            <div v-for="(item , i) in essaydata" :key="i" >
                                <li class="tabs_li" style="height: 40px;text-align: center;width: 100px" @click="callback(i)">{{item.title}}</li>
                            </div>

                        </div>
                        <a-divider type="vertical" style="float: left;height: 100%;margin-right: 40px"/>
                        <div style="margin:20px 40px">
                            <p v-html="essay_content"/>
                        </div>

                    </a-tab-pane>
                    <a-tab-pane tab="视频推荐" key="2" >
                        <div hoverable style="width: 240px;float: left;margin: 20px" v-for="(item ,i) in videodata" :key="i">
                            <div class="img_box">
                                <a :href="item.url">
                                <img :src="item.img" alt="" class="resent-grid-img"/>
                                <div class="resent-grid-info">
                                    <h5>{{item.title}}</h5>
                                    <p>{{item.desc}}</p>
                                    <div class="slid-bottom-grids">
                                        <span style="color: #525254;position: absolute;margin-top: 12px;margin-left: 16px;font-weight: lighter;font-family:'Courier New', Courier, monospace;font-size: small;">来源：</span>
                                        <img :src="img" alt="#" style="width: 60px;height: auto;margin-left: 60px;">
                                    </div>
                                </div>
                                </a>
                            </div>
                        </div>

                    </a-tab-pane>
                    <a-tab-pane tab="资源下载" key="3">
                        <div style="width: 240px;float: left;height: 100%">
                             <p class="logo_blue">
                                 资源介绍
                             </p>
                            <a-carousel autoplay >
                                <div>
                                    <p style="padding: 16px">
                                        乐鑫的 ESP8266 和 ESP32 系列芯片的 SDK 包含一套实用程序和设备级应用程序接口 (API)。优化的预编译库和即用编译驱动程序库缩短了产品的开发时间时间，
                                        同时能够满足客户定制的需求。另外，乐鑫 SDK 使用免费的 Xtensa GCC 工具链进行编译。
                                    </p>
                                </div>
                                <div>
                                    <p style="padding: 16px">
                                        MicroPython [1]  是 Python 3 语言的精简实现 ，包括Python标准库的一小部分，经过优化可在微控制器和受限环境中运行。
                                        pyboard是官方提供的运行MicroPython的电子电路板，它可以运行MicroPython。
                                    </p>
                                </div>
                                <div>
                                    <p style="padding: 16px">
                                    NodeMCU,是一个开源的物联网平台。 它使用Lua脚本语言编程。该平台基于eLua 开源项目,底层使用ESP8266 sdk 0.9.5版本。
                                  </p>
                                </div>
                            </a-carousel>
                        </div>
                        <a-divider type="vertical" style="float: left;height: 100%;margin-right: 40px"/>
                        <a-collapse  :bordered="false" v-for="(item,i) in sdkdata" :key="i">
                            <template v-slot:expandIcon="props">
                                <a-icon type="caret-right" :rotate="props.isActive ? 90 : 0" />

                            </template>

                            <a-collapse-panel :header="item.title" key="1" :style="customStyle">
                                <p>{{item.desc}}</p>
                                <p class="add_time">{{dateFormat(item.add_time)}}</p>
                                <a :href="item.sdkfile">
                                <a-button type="primary" shape="round" icon="download">下载</a-button>
                                </a>
                            </a-collapse-panel>
                        </a-collapse>


                    </a-tab-pane>
                </a-tabs>
            </div>
        </a-layout-content>
        <a-layout-footer :style="{ textAlign: 'center' }">
            Ant Design ©2018 Created by Ant UED
        </a-layout-footer>
    </a-layout>
</template>

<script>
    import moment from 'moment'
    import {mapActions} from "vuex";
    export default {
        name: "Files",
        data () {
            return {
                videoImg:require('../../assets/unqu.jpeg'),
                img:require('../../assets/Tecent.png'),
                mode: 'left',
                essaydata:[],
                videodata:[],
                sdkdata:[],
                essay_content:'',
                text: `A dog is a type of domesticated animal.Known for its loyalty and faithfulness,it can be found as a welcome guest in many households across the world.`,
                customStyle:
                    'background: #f7f7f7;border-radius: 4px;margin-bottom: 24px;border: 0;overflow: hidden',
            }
        },
        created(){
            this.GetEssays();
            this.GetVideos();
            this.GetSDKs();

        },
        computed: {
            ...mapActions(['GetEssay',"GetVideo","GetSDK"]),
            //...mapGetters(['essays',]),

        },
        methods: {
            imgCallback(url){
                window.open(url,"_blank");
            },
            dateFormat:function(date){
                if(date === undefined){
                    return ''
                }
                return moment(date).format("YYYY-MM-DD HH:mm")
            },
            GetSDKs:function () {
                const {GetSDK,}=this;
                GetSDK.then(() => {
                    this.sdkdata=this.$store.getters.sdks
                    // console.log(this.essaydata)
                }).catch(() => {
                })
            },
            GetEssays:function () {
                const {GetEssay,}=this;
                GetEssay.then(() => {
                    this.essaydata=this.$store.getters.essays
                    this.essay_content=this.$store.getters.essays[0].content
                   // console.log(this.essaydata)
                }).catch(() => {
                })
            },
            GetVideos:function () {
                const {GetVideo}=this;
                GetVideo.then(() => {
                    this.videodata=this.$store.getters.videos
                    //this.essay_content=this.$store.getters.[0]["content"]
                    // console.log(this.essaydata)
                }).catch(() => {
                })
            },
            callback (val) {
                //console.log(val)
                this.essay_content=this.essaydata[val].content
            },
        },
    }
</script>

<style scoped>
    #components-layout-demo-fixed .logo {
        width: 120px;
        height: 31px;
        background: rgba(255,255,255,.2);
        margin: 16px 24px 16px 0;
        float: left;
    }
.ant-layout-header{
    background-color: rgb(41,98,255);

}
    .logo_white{
        position: absolute;
        font-size: 1.25rem;
        font-weight: 700;
        text-transform: uppercase;
        color: #FFFFFF;
    }
    .logo_blue{

        font-size: 1.25rem;
        font-weight: 700;
        text-transform: uppercase;
        color: #1890ff;

    }
    .tabs_li:hover{
        cursor: pointer;
        color:#1890ff;
        border-right: 1px #0c3eff;
    }
    .ant-collapse .add_time {
        margin-right: 100px;
       float: right;
    }

    .img_box{
        width: 100%;
        height: 100%;
        border-width: 0.5px;
        border-style: solid;
        border-radius: 4px;
        border-color: #ccc;
        box-shadow: 2px 2px 10px #525254;
    }
    .img_box .resent-grid-img{
        width: 100%;
        height: auto;
        overflow: hidden;
        margin: 0;
    }
    .img_box .resent-grid-info{

        margin-top: 16px;

        font-weight: 600;
        color: #525254;
        font-size: 18px;
        line-height: 1.3em;


        width: 100%;
        height: auto;
        overflow: hidden;

    }
    .img_box .resent-grid-info h5{
        color: #1890ff;
        padding-left: 10px;
        padding-right: 10px;
        display: block;
        text-overflow:inherit;
        overflow: hidden;
        white-space:nowrap;
        font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
        overflow:hidden;
        width: 80%;
        text-overflow:ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-box-pack: center;
        -webkit-box-align: center;
        -webkit-line-clamp:2;
        overflow: hidden;


    }
    .img_box .resent-grid-info p{
        display: block;
        margin-top: -10px;
        font-size:14px;
        width: 80%;
        height: 50px;
        line-height: 20px;
        padding-left: 10px;
        padding-top: 10px;
        font-weight:normal;
        color: #999;
        overflow: hidden;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;

    }
    .slid-bottom-grids{
        height: 60px;
        width: 100%;
        /*margin-top: -10px;*/

    }

</style>
